<template>
  <div class="app-container">
    <div class="titleBox">
      <p>首页展示模块设置</p>
    </div>
    <el-row :gutter="10" class="mb8" ref="refbut">
<!--      <el-col :span="1.5">-->
<!--        <el-button type="primary" plain  @click="handleDagly">操作管理员模块</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button type="primary" plain  @click="handleNormal">操作用户模块</el-button>-->
<!--      </el-col>-->
      <el-col :span="1.5">
        <div style="display: flex">
          <span style="margin-right: 5%">
            <el-select v-model="roleName" @change="changeRoleName"  placeholder="请选择" clearable filterable>
              <el-option v-for="dict in roleOption" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
            </el-select>
          </span>
          <span>
            <el-button type="primary" plain :disabled="disabled" @click="configuration">添加配置</el-button>
          </span>
        </div>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="dataList" height="500">
      <el-table-column label="序号" type="index" width="55" align="center"/>
      <el-table-column label="角色" prop="name" align="center" :show-overflow-tooltip="true" />
      <el-table-column label="展示模块" prop="show" align="center" :show-overflow-tooltip="true" />
      <el-table-column label="快捷入口" prop="quickEntry" align="center" :show-overflow-tooltip="true" />
      <el-table-column label="待办内容" prop="dbDetail" align="center" :show-overflow-tooltip="true" />
      <el-table-column label="个人设置" prop="grzxdetail" align="center" :show-overflow-tooltip="true" />
    </el-table>

    <transFer :title="SetupTitle" :dataChecked="myDataChecked" :cities="SetupData" @determine="submit" @closeFilter="closeFilter" :open="setupOpen"
              :IsQuickEntry="IsQuickEntry" @QuickEntry="QuickEntry" :IsHomepage="IsHomepage" @HomePage="HomePage" :IsDaiBan="IsDaiBan" :IsGrset="IsGrset" @Daiban="Daiban" @isGrsetTap="isGrsetTap">
    </transFer>
  </div>
</template>

<script>
import {getSyConfig, getSyConfigName, saveSyConfig, selectSysRoleList} from "@/api/system/homepageConfiguration";
import transFer from "@/components/transFer/index.vue"

export default {
  name: "index",
  components: { transFer },
  data() {
    return {
      loading: false,
      dataList: [],
      option: [],
      // 展示项
      display: [],
      // 快捷入口
      entry: [],
      // 待办项
      dbdetail: [],
      //个人设置
      grzxdetail:[],
      // 展示弹窗
      SetupTitle: "设置首页显示模块",
      // 应用定义展示右侧数据
      myDataChecked: [],
      // 应用定义明细是否显示弹出层
      setupOpen: false,
      // 数据
      SetupData: [],
      IsQuickEntry: false,
      IsHomepage: false,
      IsDaiBan: false,
      IsGrset: false,
      // 刚进入穿梭框页面右侧显示数据
      zsnormalList: [],
      kjnormalList: [],
      dbnormalList: [],
      zsdaglyList: [],
      kjdaglyList: [],
      dbdaglyList: [],
      // 操作
      operate: '',
      // 角色
      roleName: '',
      // 保存list
      nameList: [],
      // 类型
      type: '',
      isStyle: '',
      roleId: '',
      roleOption: [],
      disabled: true
    }
  },
  created() {
    if (this.$store.getters.size == 'small') {
      this.isStyle = true
    } else {
      this.isStyle = false
    }
    this.getOption()
    this.getToletreePOST()
  },
  methods: {
    //获取角色树
    getToletreePOST() {
      selectSysRoleList().then(response => {
        this.roleOption = response.data.map(item => {
          return {
            value: item.roleKey,
            label: item.roleName
          }
        })
      });
    },
    changeRoleName() {
      if (this.roleName != '') {
        this.disabled = false
      } else {
        this.disabled = true
      }
    },
    // 获取列表数据
    getList() {
      getSyConfig().then(response=>{
        this.dataList = response.data
        // 展示项
        for (let i = 0; i < response.data.length; i++) {
          var show = []
          for (let j = 0; j < response.data[i].zs.length; j++) {
            for (let k = 0; k < this.display.length; k++) {
              if (response.data[i].zs[j].name == this.display[k].fieldName) {
                show.push(this.display[k].fieldCaption)
              }
            }
          }
          this.dataList[i].show = show.toString()
        }
        // 快捷项
        for (let i = 0; i < response.data.length; i++) {
          var quickEntry = []
          for (let j = 0; j < response.data[i].kj.length; j++) {
            for (let k = 0; k < this.entry.length; k++) {
              if (response.data[i].kj[j].name == this.entry[k].fieldName) {
                quickEntry.push(this.entry[k].fieldCaption)
              }
            }
          }
          this.dataList[i].quickEntry = quickEntry.toString()
        }
        // 待办项
        for (let i = 0; i < response.data.length; i++) {
          var dbDetail = []
          for (let j = 0; j < response.data[i].db.length; j++) {
            for (let k = 0; k < this.dbdetail.length; k++) {
              if (response.data[i].db[j].name == this.dbdetail[k].fieldName) {
                dbDetail.push(this.dbdetail[k].fieldCaption)
              }
            }
          }
          this.dataList[i].dbDetail = dbDetail.toString()
        }

        //个人设置
        for (let i = 0; i < response.data.length; i++) {
          var grzxdetail = []
          for (let j = 0; j < response.data[i].grzx.length; j++) {
            for (let k = 0; k < this.grzxdetail.length; k++) {
              if (response.data[i].grzx[j].name == this.grzxdetail[k].fieldName) {
                grzxdetail.push(this.grzxdetail[k].fieldCaption)
              }
            }
          }
          this.dataList[i].grzxdetail = grzxdetail.toString()
        }
      })
    },
    // 获取对应中文意思
    getOption() {
      console.log("slkdfjsdkljfkl")
      getSyConfigName().then(response => {
        console.log(response,"---------------------------")
        this.option = response.data
        this.display = this.option.filter(item => item.type == '1')
        this.display = this.display.map((item,index) => {
          return {
            fieldName: item.value,
            fieldCaption: item.name,
            isOrder: 'asc',
            key: index,
            type: item.type
          }
        })
        this.entry = this.option.filter(item => item.type == '2')
        this.entry = this.entry.map((item,index) => {
          return {
            fieldName: item.value,
            fieldCaption: item.name,
            isOrder: 'asc',
            key: index,
            type: item.type
          }
        })
        this.dbdetail = this.option.filter(item => item.type == '3')
        this.dbdetail = this.dbdetail.map((item,index) => {
          return {
            fieldName: item.value,
            fieldCaption: item.name,
            isOrder: 'asc',
            key: index,
            type: item.type
          }
        })
        this.grzxdetail = this.option.filter(item => item.type == '4')
        console.log(this.grzxdetail,"测试111111111111111111111")
        this.grzxdetail = this.grzxdetail.map((item,index) => {
          return {
            fieldName: item.value,
            fieldCaption: item.name,
            isOrder: 'asc',
            key: index,
            type: item.type
          }
        })
        console.log(this.grzxdetail)
        this.getList()
      })
    },
    // 点击配置
    configuration() {
      this.setupOpen = true
      this.IsQuickEntry = true
      this.IsHomepage = false
      this.IsDaiBan = true
      this.IsGrset=true
      this.SetupData = this.display
      this.operate = 'display'
      this.myDataChecked = []
      console.log(this.dataList,"------------111--------------")
      if (this.dataList.filter(item => item.key == this.roleName).length != 0) {
        var zsList = this.dataList.filter(item => item.key == this.roleName)[0].zs
        for (let i = 0; i < zsList.length; i++) {
          const data = this.display.filter((item) => item.fieldName == zsList[i].name)
          this.myDataChecked = this.myDataChecked.concat(data)
        }
      }
    },
    // 保存
    submit(value, biaoshi){
      this.nameList = []
      this.type = ''
      if(this.operate == 'display') {
        for (let i = 0; i < value.length; i++) {
          const data = this.display.filter((item) => item.key === value[i])
          const fieldName = data.map((item) => item.fieldName)
          this.nameList = this.nameList.concat(fieldName)
        }
        this.type = '1'
        this.saveInfo(this.nameList, this.type, this.roleName, biaoshi)
      } else if(this.operate == 'entry') {
        for (let i = 0; i < value.length; i++) {
          const data = this.entry.filter((item) => item.key === value[i])
          const fieldName = data.map((item) => item.fieldName)
          this.nameList = this.nameList.concat(fieldName)
        }
        this.type = '2'
        this.saveInfo(this.nameList, this.type, this.roleName, biaoshi)
      } else if(this.operate == 'dbdetail')  {
        for (let i = 0; i < value.length; i++) {
          const data = this.dbdetail.filter((item) => item.key === value[i])
          const fieldName = data.map((item) => item.fieldName)
          this.nameList = this.nameList.concat(fieldName)
        }
        this.type = '3'
        this.saveInfo(this.nameList, this.type, this.roleName, biaoshi)
      } else {
        for (let i = 0; i < value.length; i++) {
          const data = this.grzxdetail.filter((item) => item.key === value[i])
          const fieldName = data.map((item) => item.fieldName)
          this.nameList = this.nameList.concat(fieldName)
        }
        this.type = '4'
        this.saveInfo(this.nameList, this.type, this.roleName, biaoshi)
      }
    },
    // 保存方法
    saveInfo(nameList, type, roleName, biaoshi) {
      this.form = {
        nameList: nameList.toString(),
        type: type,
        roleName: roleName
      }
      if (biaoshi == false) {
        saveSyConfig(this.form).then(response=>{
          // this.$modal.msgSuccess('保存成功');
          // this.setupOpen = false
          this.getOption()
        })
      } else {
        saveSyConfig(this.form).then(response=>{
          this.$modal.msgSuccess('保存成功');
          this.setupOpen = false
          this.getOption()
        })
      }
    },
    // 关闭页面
    closeFilter() {
      this.setupOpen = false
      this.IsQuickEntry = false
      this.IsHomepage = false
      this.IsDaiBan = false
      this.IsGrset = false
      this.myDataChecked = []
      this.SetupData = []
      this.operate = ''
    },
    // 点击快捷入口
    QuickEntry() {
      this.IsQuickEntry = false
      this.IsHomepage = true
      this.IsDaiBan = true
      this.IsGrset = true
      this.myDataChecked = []
      this.operate = 'entry'
      this.SetupData = this.entry
      this.myDataChecked = []
      if (this.dataList.filter(item => item.key == this.roleName).length != 0) {
        var kjList = this.dataList.filter(item => item.key == this.roleName)[0].kj
        if (kjList != undefined || kjList != null) {
          for (let i = 0; i < kjList.length; i++) {
            const data = this.entry.filter((item) => item.fieldName == kjList[i].name)
            this.myDataChecked = this.myDataChecked.concat(data)
          }
        }
      }
    },
    // 个人设置
    isGrsetTap() {
      this.IsQuickEntry = true
      this.IsHomepage = true
      this.IsDaiBan = true
      this.IsGrset = false
      this.myDataChecked = []
      this.operate = 'grzx'
      this.SetupData = this.grzxdetail
      this.myDataChecked = []
      if (this.dataList.filter(item => item.key == this.roleName).length != 0) {
        var grzxList = this.dataList.filter(item => item.key == this.roleName)[0].grzx
        console.log(grzxList,"000000")
        if (grzxList != undefined || grzxList != null) {
          for (let i = 0; i < grzxList.length; i++) {
            const data = this.grzxdetail.filter((item) => item.fieldName == grzxList[i].name)
            this.myDataChecked = this.myDataChecked.concat(data)
          }
        }
      }
    },
    // 点击模块设置
    HomePage() {
      this.IsQuickEntry = true
      this.IsHomepage = false
      this.IsDaiBan = true
      this.IsGrset = true
      this.myDataChecked = []
      this.operate = 'display'
      this.SetupData = this.display
      this.myDataChecked = []
      if (this.dataList.filter(item => item.key == this.roleName).length != 0) {
        var zsList = this.dataList.filter(item => item.key == this.roleName)[0].zs
        if (zsList != undefined || zsList != null) {
          for (let i = 0; i < zsList.length; i++) {
            const data = this.display.filter((item) => item.fieldName == zsList[i].name)
            this.myDataChecked = this.myDataChecked.concat(data)
          }
        }
      }
    },
    // 点击待办内容设置
    Daiban() {
      this.IsQuickEntry = true
      this.IsHomepage = true
      this.IsDaiBan = false
      this.IsGrset = true
      this.myDataChecked = []
      this.operate = 'dbdetail'
      this.SetupData = this.dbdetail
      this.myDataChecked = []
      if (this.dataList.filter(item => item.key == this.roleName).length != 0) {
        var dbList = this.dataList.filter(item => item.key == this.roleName)[0].db
        if (dbList != undefined || dbList != null) {
          for (let i = 0; i < dbList.length; i++) {
            const data = this.dbdetail.filter((item) => item.fieldName == dbList[i].name)
            this.myDataChecked = this.myDataChecked.concat(data)
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.titleBox {
  width: 100%;
  border-bottom: solid 1px #d3d2d9;
  margin-bottom: 1%;
  p {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    position: relative;
    display: inline-block;
    margin: 0.5% 1% 0.5% 1%;
  }
  p::before {
    position: absolute;
    content: '';
    width: 4px;
    height: 16px;
    background-color: #4980dd;
    border-radius: 0px 4px 4px 0px;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
